<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客系统详情页面</title>
    <link rel="stylesheet" href="./css/blog_commonNo.css">
    <link rel="stylesheet" href="./css/blog_detailNo.css">
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./editor.md/css/editormd.preview.min.css">
    <script src="./editor.md/editormd.js"></script>
    <script src="./editor.md/lib/marked.min.js"></script>
    <script src="./editor.md/lib/prettify.min.js"></script>
    <script src="./js/common.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./imag/logo.jpg" alt="博客图标">
        <span class="title">博客系统</span>
        <!-- 用于将图片 和 超链接分割开 -->
        <div class="splacer"></div>
        <a href="./blog_all_list.html">推荐文章</a>
        <a href="./blog_list.html">主页</a>
        <a href="./blog_add.html">写博客</a>
    </div>
    <!-- 页面的主体部分 -->
    <div class="container">
        <div class="container-left">
            <!-- 主要包括头像，文章信息等 -->
            <div class="card">
                <!-- 头像 -->
                <img src="./imag/头像.png" alt="用户头像">
                <!-- 用户名 -->
                <h3 id="username"></h3>
                <a href="https://gitee.com/little-bit-tang-chen">gitee 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>专栏</span>
                </div>
                <div class="counter">
                    <span id="artCount"></span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 文章的具体显示 -->
        <div class="container-right">
            <!-- 文章的标题 -->
            <div class="title"></div>
            <!-- 文章的发布时间 -->
            <div class="date">
                发布时间：<span id="updatetime"></span>&nbsp;&nbsp;&nbsp;
                文章阅读量：<span id="rcount"></span>
            </div>
            <!-- 文章的内容 -->
            <div id="editor-Div">
            </div>
        </div>
</body>
<script type="text/javascript">
    // 将markdown文档变成html页面
    var editormd;
    function initEdit(md) {
        editormd = editormd.markdownToHTML("editor-Div", {
            markdown: md, // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    }

    // console.log(getUrlArtId("id"));// 16

    // 根据文章id查询文章详情
    function getArtDetail(id) {
        if (id == "") {
            alert("非法参数!");
            return;
        }
        jQuery.ajax({
            url: "/art/detail",
            type: "POST",
            data: { "id": id },
            success: function (result) {
                if (result != null && result.code == 200) {
                    // 请求文章的详情信息成功
                    jQuery(".title").html(result.data.title);
                    jQuery("#updatetime").html(result.data.updatetime);
                    jQuery("#rcount").html(result.data.rcount);
                    // 显示文章的主要内容 mardown -> html
                    initEdit(result.data.content);
                    showUserInfo(result.data.uid);// 这里已经得到了文章的信息，其中包含用户的id
                } else {
                    alert("查询当前文章出错，请重新刷新页面获取文章!");
                }
            }
        });
    }
    getArtDetail(getUrlArtId("id"));

    // 根据用户的id获取到文章数量
    function showUserInfo(id) {
        jQuery.ajax({
            url: "/user/getuserbyid",
            type: "POST",
            data: { "id": id },
            success: function (result) {
                if (result != null && result.code == 200 && result.data.id > 0) {
                    // 从后端拿取数据
                    jQuery("#username").text(result.data.username);
                    jQuery("#artCount").text(result.data.artCount);
                } else {
                    alert("获取该文章的用户信息失败，请重新刷新!");
                }
            }
        });
    }

    // 根据文章的id实现访问量 + 1
    function artInCre(id) {
        jQuery.ajax({
            url: "/art/incre-rcount",
            type: "POST",
            data: { "id": id },
            success: function (result) {
                // 此时不需要后端返回数据
            }
        });
    }

    artInCre(getUrlArtId("id"));
</script>

</html>